<template>
    <div class="left">
        <el-card class="box-card" shadow="hover">
            <div class="user">
                <img src="../../assets/images/head.jpg" alt="">
                <div class="userInfo">
                    <p class="username">Admin</p>
                    <p class="access gray">超级管理员</p>
                </div>
                <div class="loginInfo">
                    <div>
                        <span>上次登录时间：</span>
                        <span class="gray">2022-8-12</span>
                    </div>
                    <div>
                        <span>上次登录地点：</span>
                        <span class="gray">武汉</span>
                    </div>
                </div>
            </div>
        </el-card>
        <el-card class="box-card" style="margin-top: 20px;height:350px" shadow="hover">
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    v-for="(val,key) in tableLabel"
                    :key="key"
                    :prop="key"
                    :label="val"
                    width="100" />
            </el-table>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "HomeLeft",
    props:['tableData'],
    data() {
        return {
            tableLabel: {
                name: '类别',
                todayBuy: '今日购买',
                monthBuy: '月购买',
                totalBuy: '总购买'
            }
        }
    },
    mounted() {
        // console.log(this.tableData)
    }
}
</script>

<style lang="less" scoped>
.el-card{
    background-color: #98F0EE!important;
}
.user {
    width: 100%;
    height: 40%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 5px 10px;

    .userInfo {
        margin-left: 40px;
        font-size: 20px;
        .username {
            font-weight: bold;
        }
    }
    .loginInfo {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        div {
            display: flex;
            font-size: 14px;

            span:nth-child(2) {
                margin-left: 40px;
            }
        }
    }
    img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }
}
.gray {
    color: #999;
}
</style>